import React, {useEffect, useState} from 'react';
import {ModalForm} from "@ant-design/pro-form";
import ProTable from '@ant-design/pro-table';
import {getGoodsCategory, getGoodsLists} from '@/services/ant-design-pro/goods'
import {Image, message, Select, Space} from "antd";
import {relationGoods} from '@/services/ant-design-pro/article'
import {Option} from "antd/es/mentions";


const RelationModal = (props) => {
  const{isRelation,setIsRelation,actionRef,record} = props;
  const [isGoodsList,setIsGoodsList] = useState([])
  const [lists,setLists] = useState([])

  useEffect(async ()=>{
    //  商品分类的列表
    const GoodsCategory = await getGoodsCategory()
    setIsGoodsList(GoodsCategory)
  },[])


  const columns = [
    {
      title: '商品ID',
      dataIndex: 'id',
      align: 'center',
      search:false
    },
    {
      title: '商品图片',
      dataIndex: 'image',
      align: 'center',
      search:false,
      render: (_, record) => {
        return (
          <Image
            width={50}
            src={record.image_url}
          />
        );
      }
    },
    {
      title: '商品名称',
      dataIndex: 'product_name',
      align: 'center',
    },
    {
      title: '商品分类',
      align: 'center',
      dataIndex: 'title',
      hideInTable: true,
      renderFormItem:()=>{
        return(
          <Select>
            <Option key={0} value={0}>全部</Option>
            {
              isGoodsList.map(item=>{
                return <option key={item.id} value={item.id}>{item.title}</option>
              })
            }
          </Select>
        )
      }
    },
    {
      title:'商品分类',
      align: 'center',
      dataIndex: '',
      search: false,
      hideInTable: false,
      render:(_, record)=>{
       return (
         <div>
           <span>{record.category.data[0].nickname}</span>
         </div>
       )
      }
    }
  ]

  return (
    <div>
      <ModalForm
        visible={isRelation}
        onVisibleChange={setIsRelation}
        onFinish={async (values)=>{
          console.log(values);
          setIsRelation(false)
          await relationGoods({product_id:record.id,article_id:record.id},record.id).then(()=>{
            message.success('关联商品成功！')

            actionRef.current?.reload();
          })
        }}
      >
        <ProTable
          columns={columns}
          // actionRef={actionRef}
          request={async (params,sort,filter) => {
            // 表单搜索项会从 params 传入，传递给后端接口。
            const {data,meta} = await getGoodsLists( { ...params,...sort,...filter,...lists} )
            return {
              data,
              success:true,
              total:meta.pagination.total
            }
          }}
          rowSelection={{

          }}
          tableAlertRender={({selectedRowKeys, onCleanSelected}) => (
            <Space size={24}>
              <span>
                已选 {selectedRowKeys.length} 项
                <a style={{marginLeft: 8}} onClick={onCleanSelected}>
                  取消选择
                </a>
              </span>
            </Space>
          )}
          options={false}
          search={{
            labelWidth: 'auto',
          }}
          dateFormatter="string"
          rowKey="id"
          editable={{
            type: 'multiple',
          }}
        />

      </ModalForm>
    </div>
  );
};

export default RelationModal;
